<template>
    <div class="app-container">
        <div class="pd1020">物流单号</div>
        <el-row class="pd1020">
            <el-col :xs="{span: 3}" :sm="{span: 3}" :md="{span: 3}" :lg="{span: 3}" :xl="{span: 3}" style="padding-right:10px;font-size: 35px;width: 45px;">
                <div @click="focusInput"><svg-icon icon-class="scan" /></div>
            </el-col>
            <el-col :xs="{span: 15}" :sm="{span: 8}" :md="{span: 8}" :lg="{span: 8}" :xl="{span: 8}" style="padding-right:10px;height: 40px;line-height: 40px;">
                <el-input placeholder="请输入物流编号,无法扫码时，请手动输入" @focus="ipt_scan=''" @keyup.enter.native="getInfo" ref="ipt_scan" v-model="ipt_scan" clearable> </el-input>
            </el-col>
            <el-col :xs="{span: 4}" :sm="{span: 4}" :md="{span: 4}" :lg="{span: 4}" :xl="{span: 4}" style="padding-right:10px;height: 40px;
    line-height: 38px;">
                <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="getInfo">查询</el-button>
            </el-col>
        </el-row>
        <el-row class="pd1020" style="border-top: 1px solid #ddd;margin-top: 20px;padding-top: 25px;">
            <el-col :xs="{span: 21}" :sm="{span: 21}" :md="{span: 21}" :lg="{span: 21}" :xl="{span: 21}">
                签收详情
            </el-col>
            <el-col :xs="{span: 3}" :sm="{span: 3}" :md="{span: 3}" :lg="{span: 3}" :xl="{span: 3}">
                <el-button size="small" class="filter-item" type="primary" icon="el-icon" @click="confirm">确定</el-button>
            </el-col>
        </el-row>
        <section class="spilt_cell">
            <div>进厂批次：{{receiveInfo.batchOrderCode}}</div>
            <div>共计：{{receiveInfo.all_bagCnt}}袋<span style="width: 20px;display: inline-block;"></span>共{{receiveInfo.allCars}}车</div>
            <div>物流单号：{{receiveInfo.code}}</div>
            <div>装车{{receiveInfo.carNumber}}：{{receiveInfo.sent_bagCnt}}袋</div>
            <div>物流司机：{{receiveInfo.createUserName}}</div>
            <div v-if="receiveInfo.status != 2"><span style="float: left;">实收：</span><el-input style="width: 150px;" placeholder="请输入实收袋数" ref="btnsearch" v-model="bagCnt" clearable></el-input>袋</div>
        </section>
        <div class="pd1020">进厂批次详情</div>
        <div class="pd1020">总数量：{{receiveInfo.allClothesCnt}}</div>
        <el-table :key='tableKey' :data="detailList" size="medium" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%" stripe>
            <el-table-column align="center" label="科室" prop="departmentName"></el-table-column>
            <el-table-column align="center" label="品类" prop="typeName"></el-table-column>
            <el-table-column align="center" label="小计" prop="clothesCnt"></el-table-column>
        </el-table>
    </div>
</template>

<script>
  import { fetchLogisOrder, logisOrderReceive } from '@/api/logis'

  export default {
    name: 'ReceiveIn',
    data() {
      return {
        receiveInfo: {},
        detailList: [],
        tableKey: 0,
        listLoading: false,
        ipt_scan: '',
        bagCnt: ''
      }
    },
    methods: {
      focusInput() {
        this.ipt_scan = ''
        this.$refs['ipt_scan'].focus()
      },
      getInfo() {
        if (!this.ipt_scan) {
          this.$message({
            message: '请输入物流单号',
            type: 'error',
            showClose: true
          })
          return
        }
        this.listLoading = true
        fetchLogisOrder({ code: this.ipt_scan }).then(response => {
          this.receiveInfo = response.data || {}
          this.detailList = response.data.batchDetail || []
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      },
      confirm() {
        if (this.receiveInfo.status === 2 || this.receiveInfo.status === '2') {
          this.$message({ message: '此单已签收~', type: 'error', showClose: true })
          return
        }
        if (!this.receiveInfo || !this.receiveInfo.sent_bagCnt) {
          this.$message({ message: '请先查询物流单', type: 'error', showClose: true })
          return
        }
        if (!this.bagCnt || !/^\d+$/.test(this.bagCnt)) {
          this.$message({ message: '请输入实收数量', type: 'error', showClose: true })
          return
        }
        if (this.bagCnt > this.receiveInfo.sent_bagCnt) {
          this.$message({ message: '实收数量不能大于装车数量！', type: 'error', showClose: true })
          return
        }
        logisOrderReceive(this.ipt_scan, this.bagCnt).then(response => {
          this.$message({ message: '签收成功', type: 'success', showClose: true })
          this.receiveInfo = {}
          this.detailList = []
          this.ipt_scan = ''
          this.bagCnt = ''
        }).catch(e => {})
      }
    },
    computed: {
    }
  }
</script>

<style scoped>
    .spilt_cell {
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        height: 140px;
        padding: 10px 20px;
    }
    .spilt_cell div {
        display: inline-block;
        width: 50%;
        float: left;
        height: 35px;
        line-height: 35px;
    }
    .pd1020 {
        padding: 10px 20px;
    }
</style>
